{% extends "base.html" %}

{% block title %}编辑设备{% endblock %}

{% block content %}
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h4 class="mb-0">编辑设备</h4>
                </div>
                <div class="card-body">
                    <form method="post">
                        <div class="mb-3">
                            <label for="name" class="form-label">设备名称 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="name" name="name" 
                                   required maxlength="128" value="{{ equipment.name }}">
                            <div class="form-text">请输入2-128个字符的设备名称</div>
                        </div>
                        <div class="mb-3">
                            <label for="model" class="form-label">型号 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="model" name="model" 
                                   required maxlength="64" value="{{ equipment.model }}">
                            <div class="form-text">请输入2-64个字符的设备型号</div>
                        </div>
                        <div class="mb-3">
                            <label for="type" class="form-label">设备类型 <span class="text-danger">*</span></label>
                            <select class="form-select" id="type" name="type" required>
                                <option value="">请选择设备类型</option>
                                <option value="sensor" {% if equipment.type == 'sensor' %}selected{% endif %}>传感器</option>
                                <option value="controller" {% if equipment.type == 'controller' %}selected{% endif %}>控制器</option>
                                <option value="actuator" {% if equipment.type == 'actuator' %}selected{% endif %}>执行器</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="manufacturer" class="form-label">制造商</label>
                            <input type="text" class="form-control" id="manufacturer" 
                                   name="manufacturer" maxlength="128" 
                                   value="{{ equipment.manufacturer or '' }}">
                        </div>
                        <div class="mb-3">
                            <label for="price" class="form-label">单价（元）</label>
                            <input type="number" class="form-control" id="price" name="price" 
                                   step="0.01" min="0" max="999999999.99"
                                   value="{{ "%.2f"|format(equipment.price or 0) }}">
                            <div class="form-text">请输入0-999999999.99之间的数字，最多保留2位小数</div>
                        </div>
                        <div class="mb-3">
                            <label for="specifications" class="form-label">技术规格</label>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <input type="text" class="form-control mb-2" id="spec_key" 
                                           placeholder="规格名称（如：精度）">
                                </div>
                                <div class="col-md-6">
                                    <input type="text" class="form-control mb-2" id="spec_value" 
                                           placeholder="规格值（如：0.1%）">
                                </div>
                            </div>
                            <button type="button" class="btn btn-outline-secondary btn-sm mb-2" onclick="addSpecification()">
                                <i class="fas fa-plus me-1"></i>添加规格
                            </button>
                            <div id="specifications_list" class="mb-2">
                                <!-- 已添加的规格将显示在这里 -->
                            </div>
                            <input type="hidden" name="specifications" id="specifications_json">
                            <div class="form-text">添加设备的技术规格，如精度、量程、响应时间等</div>
                        </div>
                        <div class="text-end">
                            <a href="{{ url_for('main.equipment_list') }}" class="btn btn-secondary">
                                <i class="fas fa-times me-1"></i>取消
                            </a>
                            <button type="submit" class="btn btn-primary" onclick="prepareSpecifications()">
                                <i class="fas fa-check me-1"></i>保存
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
let specifications = {{ equipment.specifications|tojson|safe }};

function addSpecification() {
    const key = document.getElementById('spec_key').value.trim();
    const value = document.getElementById('spec_value').value.trim();
    
    if (key && value) {
        specifications[key] = value;
        updateSpecificationsList();
        // 清空输入框
        document.getElementById('spec_key').value = '';
        document.getElementById('spec_value').value = '';
    }
}

function removeSpecification(key) {
    delete specifications[key];
    updateSpecificationsList();
}

function updateSpecificationsList() {
    const list = document.getElementById('specifications_list');
    list.innerHTML = '';
    
    for (const [key, value] of Object.entries(specifications)) {
        const item = document.createElement('div');
        item.className = 'badge bg-light text-dark me-2 mb-2 p-2';
        item.innerHTML = `
            ${key}: ${value}
            <button type="button" class="btn-close ms-2" 
                    onclick="removeSpecification('${key}')" style="font-size: 0.5rem;"></button>
        `;
        list.appendChild(item);
    }
    
    // 更新隐藏的input值
    document.getElementById('specifications_json').value = JSON.stringify(specifications);
}

// 页面加载时初始化规格列表
document.addEventListener('DOMContentLoaded', function() {
    updateSpecificationsList();
});

function prepareSpecifications() {
    document.getElementById('specifications_json').value = JSON.stringify(specifications);
    return true;
}
</script>
{% endblock %} 